Títulos bicolor en la sidebar

Deybi me preguntaba como conseguir que los títulos de la sidebar se muestren en dos colores. Hace tiempo J.Miur explicaba como hacerlo y curiosamente tenía la respuesta delante pero no la veía.

Quien enseña, aprende dos veces así que ahí va mi explicación.

Vimos como añadir estilos a la etiqueta span y entendimos que con esa etiqueta podemos cambiar los estilos de un texto escogiendo una parte en concreto.

Para añadir estilos a un texto con la etiqueta span añadimos algo así:
<span >texto</span>

Si deseamos añadir diferentes estilos dentro de un mismo texto añadimos la etiqueta span con los estilos seleccionados tantas veces como estilos deseamos añadir.

Lorem Ipsum publishing software Lorem Ipsum

Cuando ya entendemos un poco en qué consiste la etiqueta span comenzamos con el tema de la entrada. Siento la sensación que le estoy copiando literalmente el post a J.Miur pero es que no encuentro otra forma de explicarlo.

Cualquier gadget cuando lo editamos tenemos la opción de añadirle un título, podemos omitirlo pero es muy útil cuando buscamos ese gadget en plantilla de diseño o en edición de HTML.
Vamos a hacer la prueba con los gadgets de etiquetas y archivos.

En plantilla Edición de HTML marcamos para expandir la plantilla de artilugios y buscamos

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Como explica J.Miur la clase class='title' nunca está definida (yo no la he encontrado en ninguno de los blogs que he probado)
La etiqueta <data:title> es la que genera el título, si deseamos suprimir el título bastará con suprimir esa etiqueta.
Si decidimos mostrarlo haciendo uso de la etiqueta span lo que haremos será en el código anterior suprimir lo marcado en rojo por la siguiente línea.

<h2> las <span> etiquetas </span></h2>

Guardamos los cambios y pasamos a los estilos, nos situamos justo antes de <b:skin> para añadir:

.sidebar h2 {
color: #000;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: #FFFFFF;
}

Con sidebar h2 estamos añadiendo los estilos de los títulos, si ya los tuviéramos añadidos y queremos conservarlos omitimos esa parte y añadimos sidebar h2 span es el texto que incluimos en la etiqueta span, estos últimos adquieren los mismos estilos que el anterior, si deseamos unos diferentes no hay problema en añadirlos.

Un ejemplo son los títulos de mi sidebar y en el footer de este blog.
Más ejemplos ya saben donde, en Vagabundia.